<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="/node_modules/bootstrap/dist/css/bootstrap.css"
      rel="stylesheet"
    />
    <script src="/node_modules/bootstrap//dist/js/bootstrap.bundle.js"></script>
  </head>

  <body>
    <button
      type="button"
      class="btn btn-primary"
      data-bs-toggle="tooltip"
      title="这是一个 Bootstrap 5 的 Tooltip 示例"
    >
      鼠标悬停
    </button>

    <button type="button" class="btn btn-primary" id="liveToastBtn">
      Show live toast
    </button>

    <!-- <div class="toast-container position-fixed bottom-0 end-0 p-3">
      <div
        id="liveToast"
        class="toast"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
      >
        <div class="toast-header">
          <strong class="me-auto">Bootstrap</strong>
          <small>11 mins ago</small>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="toast"
            aria-label="Close"
          ></button>
        </div>
        <div class="toast-body">Hello, world! This is a toast message.</div>
      </div>
    </div> -->

     <div
        id="liveToast"
        class="toast"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
      >
        <div class="toast-header">
          <!-- <img src="..." class="rounded me-2" alt="..." /> -->
          <strong class="me-auto">Bootstrap</strong>
          <small>11 mins ago</small>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="toast"
            aria-label="Close"
          ></button>
        </div>
        <div class="toast-body">Hello, world! This is a toast message.</div>
      </div>

    <script>
      var tooltipTriggerList = [
        ...document.querySelectorAll('[data-bs-toggle="tooltip"]'),
      ];
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
      });

      const toastTrigger = document.getElementById("liveToastBtn");
      const toastLiveExample = document.getElementById("liveToast");
      if (toastTrigger) {
        toastTrigger.addEventListener("click", () => {
          const toast = new bootstrap.Toast(toastLiveExample);

          toast.show();
        });
      }
    </script>
  </body>
</html>
